<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
            size="max"
            placeholder="搜索借款方"
            suffix-icon="el-icon-search"
            @keyup.native="getLoanList"
            v-model="borrower"
          >
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-input
            size="max"
            placeholder="搜索借款人手机"
            suffix-icon="el-icon-search"
            @keyup.native="getLoanList"
            v-model="phone"
          >
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="pledge"
            placeholder="全部抵押类型"
            @change="getLoanList"
            style="width: 100%"
          >
            <el-option
              v-for="item in stateList"
              :label="item.name"
              :key="item.id"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="num" label="编号"> </el-table-column>
        <el-table-column prop="borrower" label="借款方"> </el-table-column>
        <el-table-column prop="phone" label="借款人手机"> </el-table-column>
        <el-table-column prop="entitle" label="标名"> </el-table-column>
        <el-table-column prop="guarantee" label="担保机构"> </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="money" label="借款金额"> </el-table-column>
        <el-table-column prop="annual" label="年化利率"> </el-table-column>
        <el-table-column
          prop="repayment"
          :formatter="repaymentState"
          label="还款方式"
        >
        </el-table-column>
        <el-table-column prop="deadline" label="期限"> </el-table-column>
        <el-table-column prop="created" label="添加时间"> </el-table-column>
        <el-table-column prop="state" :formatter="loanState" label="状态">
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUphold(scope.row)"
              >等待上架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="posAbt">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        :total="total"
        layout="sizes, total, jumper ,prev, pager, next"
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import * as api from "@/api";

export default {
  name: "Index",
  created() {
    this.getLoanList();
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 5,
      loading: false,
      borrower: "",
      phone: "",
      pledge: 0,
      queryState: 1,
      stateList: [
        {
          id: 0,
          name: "全部抵押类型"
        },
        {
          id: 1,
          name: "车抵品"
        },
        {
          id: 2,
          name: "房抵品"
        },
        {
          id: 3,
          name: "民品抵押"
        }
      ],
      tableData: []
    };
  },
  methods: {
    // 借款标状态转换
    loanState: function(row) {
      return row.state === 1 ? "待审核" : "未知状态";
    },
    // 还款方式转换
    repaymentState: function(row) {
      return row.repayment === 1
        ? "一次性还款"
        : row.repayment === 2
        ? "等额本息"
        : row.repayment === 3
        ? "按月付息到期还本"
        : row.repayment === 4
        ? "按天还款"
        : "未知状态";
    },
    //获取列表数据
    getLoanList: function() {
      this.loading = true;
      api
        .queryBids({
          page: this.currentPage,
          size: this.pageSize,
          state: this.queryState,
          keywords: {
            pledge: this.pledge,
            borrower: this.borrower,
            phone: this.phone
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.row);
            this.total = res.data.count;
            this.tableData = res.data.row;
          } else {
            this.tableData = [];
            this.total = 0;
          }
          this.loading = false;
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        });
    },
    handleUphold(row) {
      this.loading = true;
      console.log(row);
      api
        .updateBidInfo({
          id: row.id,
          state: 4
        })
        .then(res => {
          this.loading = false;
          if (res.data.code === 200) {
            this.$message.success("等待上架");
            this.getLoanList();
          } else {
            this.$message.error("服务器开小差了");
          }
        })
        .catch(() => {
          this.$message.error("服务器开小差了");
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getLoanList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getLoanList();
    }
    // 还款方式转换
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
</style>
